<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>桃李科技</title>
	<link rel="stylesheet" href="__BS__/css/bootstrap.min.css">
  <style>
    .table a{
      display: block;
      cursor: pointer;
    }
  </style>
</head>
<body>
	<div class="container">
      <!-- Static navbar -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">桃李科技</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <!-- <li class="active"><a href="#">首页</a></li> -->
              <li><a href="<{:U('index')}>">当日签到情况</a></li>
              <li><a href="<{:U('weekSign')}>">某日签到情况查看</a></li>
              <li class="active"><a href="<{:U('statistic')}>">统计</a></li>
              <!-- <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li> -->
            </ul>
            <!-- <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
              <li><a href="../navbar-static-top/">Static top</a></li>
              <li><a href="../navbar-fixed-top/">Fixed top</a></li>
            </ul> -->
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

      <!-- Main component for a primary marketing message or call to action -->
      <blockquote>
        <p>当前日期：<{$now|date="Y-m-d",###}></p>
      </blockquote>
      <form class="form-inline" style="margin-bottom: 15px;">
        <div class="form-group">
          <label for="">班级：</label>
          <select name="class" id="selClass" class="form-control">
            <option value="1704">1704</option>
          </select>
        </div>
        <div class="form-group">
          <label>开始日期：</label>
          <input type="date" name="dateBegin" id="txtDateBegin" class="form-control">
        </div>
        <div class="form-group">
          <label>结束日期：</label>
          <input type="date" name="dateEnd" id="txtDateEnd" class="form-control" value="<{$now|date='Y-m-d',###}>">
        </div>
        <a href="#" class="btn btn-default" role="button" onclick="statistic.search(this);">查看</a>
      </form>
     <table class="table table-striped table-bordered">
      <tr>
        <th>姓名</th>
        <th>迟到次数</th>
        <th>早退次数</th>
        <th>请假次数</th>
        <th>旷课次数</th>
      </tr>
      <tbody id="tbStatistic">
        
      </tbody>
    </table>
    <!-- Button trigger modal -->
    <!-- <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Launch demo modal
    </button> -->

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">请假详情</h4>
          </div>
          <div class="modal-body" id="myModalContent">
           
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
          </div>
        </div>
      </div>
    </div>
    </div>
    <script src="__BS__/js/jquery.min.js"></script>
    <script src="__BS__/js/bootstrap.min.js"></script>
    <script type="text/javascript">
      var $tbStatistic=$('#tbStatistic');
      var delaysData=[];
      var absentsData=[];
      var skipData=[];
      var earlyQuitData=[];
      statistic={
        search:function(obj){
          var gclass=$('#selClass').val();
          var dateBegin=$('#txtDateBegin').val();
          var dateEnd=$('#txtDateEnd').val();
          if(dateBegin==''){
            alert("请选择开始日期!");
            return;
          }
          if(dateEnd==''){
            alert("请选择结束日期!");
            return;
          }
          //加上loading效果,按钮变成禁用状态
          $(obj).text("查询中...").attr("disabled","disabled");

          var url='<{:U("statisticSearch")}>';
          var param={gclass:gclass,datebegin:dateBegin,dateend:dateEnd};
          $.post(url,param,function(data){
            statistic.generateTable(data);

            $(obj).text("查看").removeAttr("disabled");
          })
        },
        generateTable:function(data){
          var str='';
          for(var i=0,len=data.length;i<len;i++){
            str+='<tr><td>'+data[i].stuname+'</td>';
            if(data[i].delays>0){//迟到
              delaysData[data[i].weixinid]=data[i].delaysdata;

              str+='<td><a onclick="statistic.showDetails(\''+data[i].stuname+'\',\''+data[i].weixinid+'\',\'delays\');">'+data[i].delays+'</a></td>';
            }else{
              str+='<td>'+data[i].delays+'</td>';
            }
            if(data[i].earlyquit>0){//早退
              earlyQuitData[data[i].weixinid]=data[i].earlyquitdata;

              str+='<td><a onclick="statistic.showDetails(\''+data[i].stuname+'\',\''+data[i].weixinid+'\',\'earlyquit\');">'+data[i].earlyquit+'</a></td>';
            }else{
              str+='<td>'+data[i].earlyquit+'</td>';
            }
            if(data[i].absents>0){//请假
              absentsData[data[i].weixinid]=data[i].absentsdata;
              str+='<td><a onclick="statistic.showDetails(\''+data[i].stuname+'\',\''+data[i].weixinid+'\',\'absents\');">'+data[i].absents+'</a></td>';
            }else{
              str+='<td>'+data[i].absents+'</td>';
            }
            if(data[i].skip>0){//旷课
              skipData[data[i].weixinid]=data[i].skipdata;
              str+='<td><a onclick="statistic.showDetails(\''+data[i].stuname+'\',\''+data[i].weixinid+'\',\'skip\');">'+data[i].skip+'</a></td>';
            }else{
              str+='<td>'+data[i].skip+'</td>';
            }
            str+='</tr>';
          }      
          $tbStatistic.html(str);    
        },
        showDetails:function(stuname,weixinid,type){
          switch(type){
            case 'absents':
              statistic.generateAbsentsTable(stuname,weixinid);
            break;
            case 'delays':
              statistic.generateDelaysTable(stuname,weixinid);
            break;
            case 'skip':
              statistic.generateSkipTable(stuname,weixinid);
            break;
            case 'earlyquit':
              statistic.generateEarlyQuitTable(stuname,weixinid);
            break;
          }
          $('#myModal').modal('toggle');
        },
        generateAbsentsTable:function(stuname,weixinid){
          var data=absentsData[weixinid];

          var str=` <table class="table table-stripped">
              <tr>
                <th>姓名</th>
                <th>开始日期</th>
                <th>结束日期</th>
                <th>请假原因</th>
              </tr>`;
              for(var i=0,len=data.length;i<len;i++){
                str+=`<tr>
                <td>`+stuname+`</td>
                <td>`+data[i].startdate+`</td>
                <td>`+data[i].enddate+`</td>
                <td>`+data[i].reason+`</td>
              </tr>`;
              }
              
            str+=`</table>`;
            $('#myModalLabel').text("请假详情");
            $('#myModalContent').html(str);
        },
        generateDelaysTable:function(stuname,weixinid){
          var data=delaysData[weixinid];

          var str=` <table class="table table-stripped">
              <tr>
                <th>姓名</th>
                <th>迟到日期</th>
                <th>签到时间</th>
              </tr>`;
              for(var i=0,len=data.length;i<len;i++){
                str+=`<tr>
                <td>`+stuname+`</td>
                <td>`+statistic.getTime(data[i].signintime).substr(0,10)+`</td>
                <td>`+statistic.getTime(data[i].signintime)+`</td>
              </tr>`;
              }
              
            str+=`</table>`;
            $('#myModalLabel').text("迟到详情");
            $('#myModalContent').html(str);
        },
        generateSkipTable:function(stuname,weixinid){
          var data=skipData[weixinid];

          var str=` <table class="table table-stripped">
              <tr>
                <th>姓名</th>
                <th>旷课日期</th>
              </tr>`;
              for(var i=0,len=data.length;i<len;i++){
                str+=`<tr>
                <td>`+stuname+`</td>
                <td>`+data[i]+`</td>
              </tr>`;
              }
              
            str+=`</table>`;
            $('#myModalLabel').text("旷课详情");
            $('#myModalContent').html(str);
        },
        generateEarlyQuitTable:function(stuname,weixinid){
          var data=earlyQuitData[weixinid];

          var str=` <table class="table table-stripped">
              <tr>
                <th>姓名</th>
                <th>早退日期</th>
                <th>签出时间</th>
              </tr>`;
              for(var i=0,len=data.length;i<len;i++){
                str+=`<tr>
                <td>`+stuname+`</td>
                <td>`+statistic.getTime(data[i].signouttime).substr(0,10)+`</td>
                <td>`+statistic.getTime(data[i].signouttime)+`</td>
              </tr>`;
              }
              
            str+=`</table>`;
            $('#myModalLabel').text("早退详情");
            $('#myModalContent').html(str);
        },
        //格式化unix时间戳
        getTime: function( /** timestamp=0 **/ ) {
            var ts = arguments[0] || 0;
            var t, y, m, d, h, i, s;
            t = ts ? new Date(ts * 1000) : new Date();
            y = t.getFullYear();
            m = t.getMonth() + 1;
            d = t.getDate();
            h = t.getHours();
            i = t.getMinutes();
            s = t.getSeconds();
            // 可根据需要在这里定义时间格式  
            return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s);
        }
      }
    </script>
</body>
</html>